import React from 'react';
import BreadCrumb from '@/components/BreadCrumb';
import s from './style.module.css';
import Overview from './overview';
import SiteUser from './siteUser';
import SiteEmail from './siteEmail';
import OutMap from './outMap';
import { Tabs } from '@knownsec/react-component';
const { TabPane } = Tabs;

export default function alert() {
  return (
    <>
      <BreadCrumb arr={[{ link: '', name: '告警中心', active: true }]} />
      <div className={s.keyMain}>
        <div className={s.keyBox}>
          <Tabs>
            <TabPane tab={<span className={s.tabTitle}>告警概览</span>} key={1}>
              <Overview />
            </TabPane>
            <TabPane
              tab={<span className={s.tabTitle}>告警联系人设置</span>}
              key={2}
            >
              <SiteUser />
            </TabPane>
            {localStorage.group === '操作员' ? null : (
              <>
                <TabPane
                  tab={<span className={s.tabTitle}>发信邮箱配置</span>}
                  key={3}
                >
                  <SiteEmail />
                </TabPane>
                <TabPane
                  tab={<span className={s.tabTitle}>外网映射配置</span>}
                  key={4}
                >
                  <OutMap />
                </TabPane>
              </>
            )}
          </Tabs>
        </div>
      </div>
    </>
  );
}
